import React, { memo, useEffect } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { getSizeImage } from '@/utils/format-utils'
import { getArtistListAction } from '../../store/actionCreators';

import DThemeHeaderSmall from '@/components/theme-header-small'
import { SettleArtistWrapper } from "./style"

export default memo(function DSettleArtist() {

  // redux hooks
  const { artistList } = useSelector(state => ({
    artistList: state.getIn(["recommend", "artistList"])
  }), shallowEqual)

  const dispatch = useDispatch()
  // other hooks
  useEffect(() => {
    dispatch(getArtistListAction())
  }, [dispatch])

  return (
    <SettleArtistWrapper>
      <DThemeHeaderSmall title="入驻歌手" more="查看全部 >" />
      <div className="item-list">
        {
          artistList.map((item, index) => {
            return (
              <a key={item.id} href="/todo" className="item">
                <img src={getSizeImage(item.img1v1Url, 62)} alt="" />
                <div className="info">
                  <div className="title">{item.alias.join("") || item.name}</div>
                  <div className="name">{item.name}</div>
                </div>
              </a>
            )
          })
        }
      </div>
      <div className="apply">
        <a href="/todo">申请成为网易音乐人</a>
      </div>
    </SettleArtistWrapper>
  )
})
